<template>
  <UniPopup ref="tencentCode" @change="change" :zIndex="998" >
    <view class="tencent-code">
      <view class="code-content">
        <view class="code-content_title">扫码关注</view>
        <view class="code-content_subtitle">接收活动、缴费、审核等通知</view>
        <view class="code-content_img">
          <TImage :src="codeImg" width="400rpx" height="400rpx" :show-menu-by-longpress="true" />
        </view>
        <view class="code-content_des">
          <view>长按二维码识别，或{{ officialAccountStatus === 0 ? "点击" : "截图保存" }}</view>
          <view v-if="officialAccountStatus === 0" class="wx_account">
            <view class="wx_account_box">
              <!-- #ifdef MP -->
              <official-account
                @load="officialAccountLoad"
                @error="officialAccountLoad"
              ></official-account>
              <!-- #endif -->
            </view>
          </view>
        </view>
      </view>
    </view>
  </UniPopup>
</template>

<script setup lang="ts">
  import UniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
  import { getCurrentInstance, computed, watch, ref } from 'vue';
  import TImage from '@/components/TImage/index.vue';
  import { useAppStoreWithOut } from '@/store/modules/app';
  import { propTypes } from '@/utils/propTypes';
  import { useUserStoreWithOut } from '@/store/modules/user';
  import { IsOfficialAccountEnum } from '@/enums/loginEnum';
  import { storeToRefs } from 'pinia';
  const useUser = useUserStoreWithOut();
  const { userInfo } = storeToRefs(useUser);

  const props = defineProps({
    // 是否显示
    popupShow: propTypes.bool.def(false),
    // 已关注公众号,是否还弹出
    followedShow: propTypes.bool.def(true)
  });
  const emit = defineEmits(['close']);
  const { globalConfig } = useAppStoreWithOut();
  const _this = getCurrentInstance();
  const codeImg = computed(() => globalConfig?.officialAccounts);

  watch(
    () => props.popupShow,
    (val) => (val ? openPopup('tencentCode') : closePopup('tencentCode')),
  );

  const openPopup = (ref: string, direction: string = 'center') => {
    console.log('当前关注状态'+userInfo.value.isOfficialAccount,'已关注是否还弹出'+props.followedShow);
    if(!props.followedShow && userInfo.value.isOfficialAccount === IsOfficialAccountEnum.FOLLOWED){
      // 已关注公众号,并且已设置关注后不再弹出
      emit('close');
    }else{
      (_this?.refs[ref] as any).open(direction);
    }
  };

  const closePopup = (ref: string, direction: string = 'center') => {
    (_this?.refs[ref] as any).close(direction);
    // 关闭弹窗时刷新用户信息,更新用户关注公众号状态
    useUser.setUserInfo();
  };

  function change(e: { show: boolean; type: string }) {
    const { show } = e;
    !show && emit('close');
  }
  const officialAccountStatus = ref<number>(0);
  function officialAccountLoad(e: { detail: { status: number; errMsg: string; scene: number } }) {
    const { errMsg, scene, status } = e.detail;
    console.log(errMsg, scene, status);
    officialAccountStatus.value = status;
  }
</script>
<style lang="scss" scoped>
  .tencent-code {
    position: relative;
    .code-content {
      width: 673rpx;
      padding: 100rpx 0;
      background: #ffffff;
      border-radius: 19rpx;
      font-size: 27rpx;
      color: #333;
      text-align: center;
      border: 1px solid transparent;

      &_title {
        font-size: 35rpx;
        margin-bottom: 15rpx;
        font-weight: bolder;
      }

      &_img {
        width: 400rpx;
        height: 400rpx;
        margin: 0 auto;
        margin-top: 30rpx;
        margin-bottom: 30rpx;
      }

      &_des {
        color: #808080;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .wx_account {
        position: relative;
        width: 70px;
        height: 40px;
        overflow: hidden;
        &_box {
          position: absolute;
          top: -30px;
          left: -220px;
          width: 300px;
          height: 84px;
        }
      }
    }
  }
</style>
